<template>
	<!-- 100个热门频道列表 -->
	<div class="channel-list">
		<router-link class="list" v-for="item in list" :key="item.id" :to="{name:'Channel', params:{id: item.id}}">
			<img class="img" :src="item.cover" />
			<span class="text">{{item.name}}</span>
		</router-link>
	</div>
</template>

<script>
export default{
	name: 'HotChannel',
	props:{
		list:{
			type: Array,
			default: () => ([])
		}
	}
}
</script>

<style scoped lang="less">
.channel-list{
	display: flex;
	min-height: 90px;
	box-sizing: border-box;
	margin-top: 40px;
	margin-bottom: 48px;
	.list{
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-direction: column;
		width: 170px;
		text-align: center;
		margin-right: 10px;
		cursor: pointer;
		&:last-child{
			margin-right: 0;
		}
		.img{
			margin: 0 auto;
			margin-bottom: 12px;
			width: 60px;
			height: 60px;
			border-radius: 2px;
			background: rgba(0,0,0,.05);
		}
		.text{
			display: block;
			width: 100%;
			text-align: center;
			font-size: 14px;
		}
	}
}
</style>
